import { defineComponent, onMounted, reactive } from 'vue'
import { useStore } from 'vuex'
import { ElDialog, ElForm, ElFormItem } from 'element-plus'

import type { DetailState } from './typings'

export default defineComponent({
  setup(props, { expose }) {
    const store = useStore()
    const state = reactive<DetailState>({
      taskDetails: {},
      detailVisible: false,
      groupList: []
    })

    const open = async (id: string) => {
      state.detailVisible = true
      const res = await store.dispatch('singleLamp/TaskDetail', { id })
      state.taskDetails = res.data
    }
    const close = () => {
      state.detailVisible = false
    }

    expose({ open })
    onMounted(async () => {
      // 分组数据
      const { data } = await store.dispatch('singleLamp/GroupData')
      state.groupList = data
    })
    return () => (
      <ElDialog
        title="调光策略详情"
        modelValue={state.detailVisible}
        beforeClose={close}
        closeOnClickModal={false} // 点遮罩层不关弹窗
        draggable // 可拖拽
        width={600}
      >
        <ElForm label-width="100px">
          <ElFormItem label="策略名称">{state.taskDetails.taskName}</ElFormItem>
          <ElFormItem label="备注">{state.taskDetails.memo}</ElFormItem>
          <ElFormItem label="策略内容">
            <div style="display:flex;flex-direction:column">
              <div>
                {state.taskDetails.startDate} ~ {state.taskDetails.endDate}
              </div>
              <div>{state.taskDetails.info}</div>
            </div>
          </ElFormItem>
          <ElFormItem label="应用分组">{state.taskDetails.groupNames}</ElFormItem>
        </ElForm>
      </ElDialog>
    )
  }
})
